<template>
  <div class="tradeShare">
    <div class="tradeShareLeft">
    <!--<div class="tradeShareLeft" @mouseenter.stop="tradeShareEnter()" @mouseleave.stop="tradeShareLeave()"> -->
     <!-- <div ref="chart1" class="tradeShareConImg"></div>-->
       <div ref="chart2020" class="tradeShareConImg" style="height:400px; "></div>

    </div>
<!--
    <div class="tradeShareRight" style="display:none;">

      <div class="usersNum">
        <div class="usersNumCon">

          <span>累计用户量</span>
          <div class="usersNumTxt">
            <span>{{formatNumberRgx(datas[1]['VALUE'])}}</span>
            <span>万人</span>
          </div>
        </div>
      </div>
      <div class="record">
        <div class="recordList">
          <img src="../../../../static/img/ico.png" />
          <span>带动就业</span>
          <img src="../../../../static/img/right-arrow.png" />
          <div>
            <span>{{formatNumberRgx(datas[0]['VALUE'])}}</span>
            <span>人</span>
          </div>
        </div>
        <div class="recordList">
          <img src="../../../../static/img/ico.png" />
          <span>拉动投资</span>
          <img src="../../../../static/img/right-arrow.png" />
          <div>
            <span>{{formatNumberRgx(datas[2]['VALUE'])}}</span>
            <span>亿元</span>
          </div>
        </div>
      </div>

    </div>
    <div :class="['tradeShareShow',tradeShare==0?'hide':''] ">
      <div class="tradeShareShowTit">
        <span class="width20">序号</span>
        <span class="width20">关区</span>
        <span class="width30">单量</span>
        <span class="width30">占比</span>
      </div>
      <div class="tradeShareShowCon">
        <div class="tradeShareShowList" v-for="(item,i) in dataList" :key='i'>
          <div class="width20"><span>{{i+1}}</span></div>
          <span class="width20">{{item.NAME}}</span>
          <span class="width30">{{item.VALUE}}</span>
          <span class="width30">{{item.PERCENT}}</span>
        </div>

      </div>
    </div>
 -->
  </div>
</template>

<script>
  export default {
    name: 'tradeShare',
    components: {

    },
    data() {
      return {
        tradeShare: 0,
        // 跨境贸易全国占比数据
        dataList: [],
        // 累计用户量 拉动就业 拉动投资
        datas: [{
            ITEMID: "ddjy",
            VALUE: 0
          },
          {
            ITEMID: "hyyhl",
            VALUE: 0
          },
          {
            ITEMID: "ldtz",
            VALUE: 0
          },
        ],
        myChart2020:''
      }
    },
    mounted() {
       var that = this;
           that.getDatas();
           that.getEchartData();
           setInterval(function() {
             that.getDatas();
             that.getEchartData();
           }, 10000)



    },
    methods: {
      // 千分位
      formatNumberRgx(num) {
        var parts = num.toString().split(".");
        parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
        return parts.join(".");
      },
      getEchartData(selectedNum) {
        var that = this;

        //2020
        const chart2020 = that.$refs.chart2020;
        if(chart2020){
                  // console.log(chart2020)
                  const myChart2020 = that.$echarts.init(chart2020)
                  that.myChart2020 = myChart2020;
        // console.log(myChart2020 )
                  const option2020 = {
                      tooltip: {
                          trigger: 'item',
                          formatter: '{a} <br/>{b}: {c} ({d}%)'
                      },
                      grid: {
                            containLabel: true,

                      },
                      series: [
                          {
                              name: '航线',
                              type: 'pie',
                              selectedMode: 'single',
                              radius: [0, '30%'],
                              label: {
                                  color:'#fff',
                                  position: 'inner',
                                  fontSize: that.commonFunction.fontSize(0.10),
                              },
                              labelLine: {
                                  show: false
                              },
                              data: [
                                  {value: 775034, name: '进口'},
                                  {value: 2762809, name: '出口'}
                              ],
                              color: ['#ff5500','#ddacde'],
                          },

                          {
                              name: '航线运力分布',
                              type: 'pie',
                              radius: ['40%', '60%'],
                              labelLine: {
                                  length: that.commonFunction.fontSize(0.20),
                              },
                              label: {
                                  // formatter: '\n{b}\n{per|{d}%}  ',
                                  formatter: function(params) {
                                     // console.log(params.name,params.percent)
                                    if (params.name) {
                                       // let res = params.name ;
                                      let res = params.name + Math.round(params.percent) + "%";
                                      return res;
                                    } else {
                                      return '';
                                    }
                                  },
                                  borderColor: '#8C8D8E',
                                   color:'#fff',
                                  rich: {
                                      b: {
                                          color: '#4C5058',
                                          fontSize:  that.commonFunction.fontSize(0.12),
                                          fontWeight: 'bold',
                                          lineHeight: that.commonFunction.fontSize(0.24),
                                          align: 'left'
                                      },
                                      per: {
                                          color: '#fff',

                                      }
                                  }
                              },
                              data: [

                                  {value: 365568, name: '欧线进口'},
                                  {value: 409466, name: '美线进口'},
                                  {value: 1134000, name: '欧线出口'},
                                  {value: 1628809, name: '美线出口'}

                              ],
                               color: ['#ee6666', '#fac858', '#91cc75', '#7ff2c6'],
                          }
                      ]
                  };
                    myChart2020.setOption(option2020);
                        window.addEventListener("resize", function() {
                           myChart2020.resize()
                        })
                        
        }                
                        
                        
                         that.$on('hook:destroyed',()=>{
                               window.removeEventListener("resize", function() {
                                   myChart2020.resize();
                               });
                             })


      },
      renderBrushed(params){
           var brushed = [];
            var brushComponent = params.batch[0];

            for (var sIdx = 0; sIdx < brushComponent.selected.length; sIdx++) {
                var rawIndices = brushComponent.selected[sIdx].dataIndex;
                brushed.push('[Series ' + sIdx + '] ' + rawIndices.join(', '));
            }
      },
      // 鼠标移动到饼图显示弹出框展示具体情况
      tradeShareEnter() {
        this.tradeShare = 1;
      },
      tradeShareLeave() {
        this.tradeShare = 0;
      },
      // 累计用户量（万人）、拉动投资等
      getDatas() {
        var that = this;
        this.$myHttp.get("getContributionInfo")
          .then(function(data) {
            if (data.status == "200") {
              that.datas = data.data.result;
            } else {
              alert("数据请求错误")
            }
          })
          .catch(function(error) {
            alert(error)
          })
      }

    },
    watch: {

    },
    destroyed () {
      var that = this;
        window.removeEventListener('resize',function() {
           that.myChart2020.resize()
        }, 20)
      },

  }
</script>

<style scoped>
  .tradeShare {
    position: relative;
    width: 100%;
    height:92%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .tradeShareLeft {
    width: 100%;
    height: 90%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .tradeShareRight {
    width: 45%;
    height: 90%;

  }

  .tradeShareConImg {
    width: 100%;
    height: 90%;
  }

  .usersNum {
    width: 100%;
    height: 60%;
    display: flex;
    align-items: center;
    /* justify-content: center; */
  }

  .usersNumCon {
    width: 1.2rem;
    height: 1.2rem;
    background: url(../../../../static/img/ico2.png) no-repeat;
    background-size: 100% 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin-left: .24rem;
  }

  .usersNumTxt {
    display: flex;
    align-items: center;
    justify-content: center;
    background-image:-webkit-linear-gradient(top,#d8dc2f,#beff80,#61ffe3);
        -webkit-background-clip:text;
        -webkit-text-fill-color:transparent;
  }

  .usersNumTxt>span:nth-of-type(1) {
    font-size: .26rem;
    font-weight: bolder;
  }

  .usersNumCon>span {
    color: #fff;
    font-size: .14rem;
    margin-top: .05rem;
  }

  .record {
    width: 100%;
    height: 40%;
  }

  .recordList {
    display: flex;
    align-items: center;
    height: .4rem;
  }

  .recordList>span {
    font-size: .14rem;
    color: #fff;
    width: 0.8rem;
    text-align: center;
    background: url(../../../../static/img/rect.png) no-repeat left 80%;
    background-size: auto;
    margin:0 .1rem;
  }

  .recordList>img:nth-of-type(2) {
    margin-right: .1rem;
  }

  .recordList>div {
    display: flex;
    align-items: center;
    font-size: .12rem;
    color: #62bef0;
    width: 1rem;
  }

  .recordList>div>span:nth-of-type(1) {
    font-size: .18rem;
  }



  .tradeShareShow {
    width: 95%;
    height:90%;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    z-index: 1000;
    background: rgba(2, 6, 86, 0.8);
    padding: .05rem;
    box-sizing: border-box;
    pointer-events: none;
  }

  .tradeShareShowTit {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #2246a6;
    height: .3rem;
  }

  .tradeShareShowTit>span {
    height: .24rem;
    line-height: .24rem;
    text-align: center;
    color: #fff;
    font-size: .12rem;
  }

  .tradeShareShowCon {
    height: 90%;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* background: red; */
  }

  .width20 {
    width: 20%;
  }

  .width30 {
    width: 30%;
  }

  .tradeShareShowList {
    display: flex;
    align-items: center;
    justify-content: center;
    height: .22rem;
    font-size: .12rem;
    width: 100%;
  }

  .tradeShareShowList>div {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .tradeShareShowList>div>span {
    border-radius: .03rem;
    width: .14rem;
    height: .14rem;
    color: #fff;
    background: #2246a6;
    line-height: .14rem;
    text-align: center;
    font-size: .12rem;
  }

  .tradeShareShowList:nth-child(1)>div>span {
    background: #ed174f;
  }

  .tradeShareShowList:nth-child(2)>div>span {
    background: #ff4200;
  }

  .tradeShareShowList:nth-child(3)>div>span {
    background: #fdd000;
  }

  .tradeShareShowList>span {
    height: .22rem;
    line-height: .22rem;
    text-align: center;
    color: #fff;
    font-size: .12rem;
  }

  .hide {
    display: none;
  }
</style>
